<template>
  <div
    id='Analysis'
    element-loading-custom-class="loadingClass"
    element-loading-text="拼命加载中"
    element-loading-targe="document.querySelector('#autoanalysis')">
    <div id="autoAnalyze-control">
      <at-radio-group id="sel-change-analyze" v-model="analyzeTab" @change="changeCurrentAnalyze">
        <at-radio-button label="autoAnalysis">自动分析</at-radio-button>
        <at-radio-button label="manDiscory">人工分析</at-radio-button>
      </at-radio-group>
      <at-button id="btn-rule-config" type="primary" @click="ruleConfig" v-if="(warnTypeTab==='attack')&&(analyzeTab==='autoAnalysis')">规则设置</at-button>
    </div>
    <div style="height: 20px;background-color: #ecf0f5;width:100%;"></div>
    <mh-tabs type="border-card" v-model="warnTypeTab" id="warn-tabs" v-if="analyzeTab==='autoAnalysis'">
      <mh-tab-pane label="攻击" name="attack">
        <div class="analyze-statistical-container">
          <div id="analyze-statistical-base" class="analyze-statistical-box">
            <div class="statistics-content">
              <div class="statistics-analyze-info">
                <div class="statistics-total">{{attackStatistics['total']}}</div>
                <div class="statistics-info">
                  <div class="statistics-title">攻击事件总数</div>
                </div>
              </div>
              <div class="statistics-chart-hint">
                <div class="chart-hint-item">
                  <span class="chart-hint-icon-total"></span>
                  <span class="chart-hint-text">攻击事件总数</span>
                </div>
                <div class="chart-hint-item">
                  <span class="chart-hint-icon-analyzed"></span>
                  <span class="chart-hint-text">已分析数量</span>
                </div>
              </div>
            </div>
            <div class="chart-main" id="attackRiskTrend"></div> 
          </div>
          <div id="analyze-statistical-rule" class="analyze-statistical-box">
            <div class="statistics-pie-title">攻击事件匹配规则分布</div>
            <div class="anlyze-pie-chart" id="attackRuleChart" :style="{width: '350px', height: '115px'}"></div>
          </div>
          <div id="analyze-statistical-state" class="analyze-statistical-box">
            <div class="statistics-pie-title">攻击事件分析状态分布</div>
            <div class="anlyze-pie-chart" id="attackAnalyzeChart" :style="{width: '350px', height: '115px'}"></div>
          </div>
        </div>
        <div class="analyze-type-content">攻击事件</div>
        <div class='tabHeader'>
          <at-button @click="matchRules" type="primary" style="position: relative;padding-left: 17px;"><i class="saas-icon-circlr-chart" style="font-size: 20px;position: absolute;left:5px;top:5px;"></i>自动分析</at-button>
          <at-tooltip class="item" effect="dark" content="重新匹配自动分析规则" placement="top-start">
            <i class="saas-icon-cir-remind" style="font-size: 17px;color:#1f92ef;position: absolute;margin-top: 6px;margin-left: 6px;"></i>
          </at-tooltip>
          <div class="search-content">
            <at-search v-model="attackTable.allocation.search.value" placeholder="请输入事件名称、受害单位、受害系统" type="text" project='mh' @keyup.enter.native="onSearch" icon="search" :on-icon-click="onSearch"/>
          </div>
        </div>
        <at-table style="width: 100%;padding: 0 20px;border-left:1px solid #eeeeee;border-right:1px solid #eeeeee;"
          :data="attackTable.data"
          @row-click='RowClick'
          @sort-change='tableSortChange'
          @filter-change='filterChange'
          key='table1'
        >
          <at-table-column :show-overflow-tooltip="true"
                            prop="rules"
                            label="最近匹配规则"
                            min-width="130"
          ></at-table-column>
          <!-- <at-table-column :show-overflow-tooltip="true"
                            prop="start_time"
                            label="首次攻击时间"
                            sortable
                            min-width="130"
          ></at-table-column> -->
          <at-table-column :show-overflow-tooltip="true"
                          prop="attack_event_name"
                          label="事件名称"
                          min-width="150"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                          prop="victim_unit"
                          label="受害单位"
                          min-width="130"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                          prop="victim_system"
                          label="受害系统"
                          min-width="130"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="threaten_level"
                            label="威胁级别"
                            width="140"
                            column-key="athreaten_level"
                            :filters="levelFilterType"
                            :filter-method="filterRow"
                            filter-placement="bottom-start"
          >
            <template slot-scope="scope">
							<span :class="['risklevel',scope.row.threaten_level == '低 危' ? 'LowRisk' : scope.row.threaten_level == '中 危' ? 'MiddleRisk' : scope.row.threaten_level == '高 危' ? 'HighRisk' : 'SeriousRisk']">
									{{scope.row.threaten_level}}
							</span>
						</template>
          </at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="handle_status"
                            label="处置状态"
                            min-width="130"
                            column-key="ahandle_status"
                            :filters="statusFilterType"
                            :filter-method="filterRow"
                            filter-placement="bottom-start"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="conclusion"
                            label="分析结论"
                            min-width="130"
                            column-key="aconclusion"
                            :filters="conclusionFilterType"
                            :filter-method="filterRow"
                            filter-placement="bottom-start"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="analyze_count"
                            label="分析次数"
                            sortable
                            min-width="130"
          ></at-table-column>
          <at-table-column label="操作" min-width="130">
            <template v-slot="scope">
              <span v-if="scope.row.analyze_state === '1'" @click.stop="goAnalyze(scope.row.attack_event_id)" style="background-color:#1f92ef;width:66px;height:22px;line-height: 22px;text-align: center;display: inline-block;color:#ffffff;">开始分析</span>
              <span v-if="scope.row.analyze_state === '0'" @click.stop="goAnalyze(scope.row.attack_event_id)" style="background-color:#1f92ef;width:66px;height:22px;line-height: 22px;text-align: center;display: inline-block;color:#ffffff;">继续分析</span>
            </template>
          </at-table-column>
        </at-table>
        <Pagination :currentPage="attackTable.allocation.pagination.current"
                    :total="attackTable.total"
                    :pageSizes="[20, 40, 80, 100]"
                    :pageSize="attackTable.allocation.pagination.pageSize"
                    layout='total, sizes, prev, pager, next, jumper'
                    @size-change="paginationSizeChange"
                    @current-change="paginationCurrentChange">
        </Pagination>
      </mh-tab-pane>
    </mh-tabs>
    <mh-tabs type="border-card" v-model="perTypeTab" id="warn-tabs" v-if="analyzeTab==='manDiscory'">
      <mh-tab-pane label="攻击" name="attack">
        <div class="analyze-statistical-container">
          <div id="analyze-statistical-base" class="analyze-statistical-box">
            <div class="statistics-content">
              <div class="statistics-analyze-info">
                <div class="statistics-total">{{perAttackStatistics.total}}</div>
                <div class="statistics-info">
                  <div class="statistics-title">攻击事件总数</div>
                </div>
              </div>
              <div class="statistics-chart-hint">
                <div class="chart-hint-item">
                  <span class="chart-hint-icon-total"></span>
                  <span class="chart-hint-text">攻击事件总数</span>
                </div>
                <div class="chart-hint-item">
                  <span class="chart-hint-icon-analyzed"></span>
                  <span class="chart-hint-text">已分析数量</span>
                </div>
              </div>
            </div>
            <div class="chart-main" id="perAttackRiskTrend"></div> 
          </div>
          <div id="analyze-statistical-rule" class="analyze-statistical-box">
            <div class="statistics-pie-title">攻击事件等级分布</div>
            <div class="anlyze-pie-chart" id="perAttackLevelChart" :style="{width: '350px', height: '115px'}"></div>
          </div>
          <div id="analyze-statistical-state" class="analyze-statistical-box">
            <div class="statistics-pie-title">攻击事件分析状态分布</div>
            <div class="anlyze-pie-chart" id="perAttackAnalyzeChart" :style="{width: '350px', height: '115px'}"></div>
          </div>
        </div>
        <div class="analyze-type-content">攻击事件</div>
        <div class='tabHeader'>
          <div class="search-content">
            <at-search v-model="perAttackTable.allocation.search.value" placeholder="请输入事件名称、受害单位、受害系统" type="text" project='mh' @keyup.enter.native="onSearch" icon="search" :on-icon-click="onSearch"/>
          </div>
        </div>
        <at-table style="width: 100%;padding: 0 20px;border-left:1px solid #eeeeee;border-right:1px solid #eeeeee;"
          :data="perAttackTable.data"
          @row-click='RowClick'
          @sort-change='tableSortChange'
          @filter-change='filterChange'
          key='table2'
        >
          <!-- <at-table-column :show-overflow-tooltip="true"
                          prop="start_time"
                          label="首次攻击时间"
                          sortable
                          min-width="130"
          ></at-table-column> -->
          <at-table-column :show-overflow-tooltip="true"
                          prop="attack_event_name"
                          label="事件名称"
                          min-width="150"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                          prop="victim_unit"
                          label="受害单位"
                          min-width="130"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                          prop="victim_system"
                          label="受害系统"
                          min-width="130"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="threaten_level"
                            label="威胁级别"
                            width="130"
                            column-key="athreaten_level"
                            :filters="levelFilterType"
                            :filter-method="filterRow"
                            filter-placement="bottom-start"
          >
            <template slot-scope="scope">
							<span :class="['risklevel',scope.row.threaten_level == '低 危' ? 'LowRisk' : scope.row.threaten_level == '中 危' ? 'MiddleRisk' : scope.row.threaten_level == '高 危' ? 'HighRisk' : 'SeriousRisk']">
									{{scope.row.threaten_level}}
							</span>
						</template>
          </at-table-column>
          <!-- <at-table-column :show-overflow-tooltip="true"
                            prop="content"
                            label="攻击内容"
                            min-width="130"
          ></at-table-column> -->
          <at-table-column :show-overflow-tooltip="true"
                            prop="handle_status"
                            label="处置状态"
                            min-width="130"
                            column-key="ahandle_status"
                            :filters="statusFilterType"
                            :filter-method="filterRow"
                            filter-placement="bottom-start"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="conclusion"
                            label="分析结论"
                            min-width="130"
                            column-key="aconclusion"
                            :filters="conclusionFilterType"
                            :filter-method="filterRow"
                            filter-placement="bottom-start"
          ></at-table-column>
          <at-table-column :show-overflow-tooltip="true"
                            prop="analyze_count"
                            label="分析次数"
                            sortable
                            min-width="130"
          ></at-table-column>
          <at-table-column label="操作" min-width="130">
            <template v-slot="scope">
              <span v-if="scope.row.analyze_state === '1'" @click.stop="goAnalyze(scope.row.attack_event_id)" style="background-color:#1f92ef;width:66px;height:22px;line-height: 22px;text-align: center;display: inline-block;color:#ffffff;">开始分析</span>
              <span v-if="scope.row.analyze_state === '0'" @click.stop="goAnalyze(scope.row.attack_event_id)" style="background-color:#1f92ef;width:66px;height:22px;line-height: 22px;text-align: center;display: inline-block;color:#ffffff;">继续分析</span>
            </template>
          </at-table-column>
        </at-table>
        <Pagination :currentPage="perAttackTable.allocation.pagination.current"
                    :total="perAttackTable.total"
                    :pageSizes="[20, 40, 80, 100]"
                    :pageSize="perAttackTable.allocation.pagination.pageSize"
                    layout='total, sizes, prev, pager, next, jumper'
                    @size-change="paginationSizeChange"
                    @current-change="paginationCurrentChange">
        </Pagination>
      </mh-tab-pane>
    </mh-tabs>
  </div>
</template>
<script>
import MhTabs from '../../../components/tabs/tabs.vue'
import MhTabPane from '../../../components/tabs/tab-panel.vue'

// import { debounce } from '../../../utils/debounce'
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapGetters, mapActions, mapMutations } = createNamespacedHelpers('analyze')
export default {
  name: 'Analyze',
  components: {
    'mh-tabs': MhTabs,
    'mh-tab-pane': MhTabPane
  },
  data () {
    return {
      warnTypeTab: 'attack',
      perTypeTab: 'attack',
      analyzeTab: 'autoAnalysis',
      conclusionFilterType: [
        { text: '生成风险事项', value: '生成风险事项' },
        { text: '未生成风险事项', value: '未生成风险事项' }
      ],
      statusFilterType: [
        { text: '已修复', value: '已修复' },
        { text: '未修复', value: '未修复' },
        { text: '修复中', value: '修复中' },
        { text: '成功防御', value: '成功防御' }
      ],
      levelFilterType: [
        { text: '低危', value: '低危' },
        { text: '中危', value: '中危' },
        { text: '高危', value: '高危' },
        { text: '严重', value: '严重' }
      ]
    }
  },
  created () {
    this.path = this.$route.fullPath
    // 自动
    this.getAttckStatistical()
    this.getAttackTableData({ 'type': 'sorter', 'val': { 'field': 'astart_time', 'order': 'descend' } })
  },
  destroyed () {
    this.commitClearAllData()
  },
  props: {
    closetabs: { type: Function }
  },
  computed: {
    ...mapGetters([
      'attackStatistics',
      'attackTable',
      'perAttackStatistics',
      'perAttackTable'
    ]),
    ...mapState({
    })
  },
  watch: {
    changeSizeValue () {
      if (document.getElementById('attackRiskTrend')) {
        this.$echarts.init(document.getElementById('attackRiskTrend')).resize()
      }
      if (document.getElementById('attackRuleChart')) {
        this.$echarts.init(document.getElementById('attackRuleChart')).resize()
      }
      if (document.getElementById('attackAnalyzeChart')) {
        this.$echarts.init(document.getElementById('attackAnalyzeChart')).resize()
      }
      if (document.getElementById('perAttackRiskTrend')) {
        this.$echarts.init(document.getElementById('perAttackRiskTrend')).resize()
      }
      if (document.getElementById('perAttackLevelChart')) {
        this.$echarts.init(document.getElementById('perAttackLevelChart')).resize()
      }
      if (document.getElementById('perAttackAnalyzeChart')) {
        this.$echarts.init(document.getElementById('perAttackAnalyzeChart')).resize()
      }
    },
    '$route' (from, to) {
      if (from.name === '@安全分析') {
        if (this.analyzeTab === 'autoAnalysis') {
          if (this.warnTypeTab === 'attack') {
            this.getAttckStatistical()
            this.getAttackTableData({ 'type': 'sorter', 'val': { 'field': 'astart_time', 'order': 'descend' } })
          }
        } else if (this.analyzeTab === 'manDiscory') {
          if (this.perTypeTab === 'attack') {
            this.getPerAttckStatistical()
            this.getPerAttackTableData({ 'type': 'sorter', 'val': { 'field': 'astart_time', 'order': 'descend' } })
          }
        }
      }
    }
  },
  methods: {
    ...mapActions({
      getAttckStatistical: 'GET_ATTACK_STATISTICAL',
      getAttackTableData: 'GET_ATTACK_TABLEDATA',
      getPerAttckStatistical: 'GET_PER_ATTACK_STATISTICAL',
      getPerAttackTableData: 'GET_PER_ATTACK_TABLEDATA',
      triggerAnalyze: 'TRIGGER_ANALYZE'
    }),
    ...mapMutations({
      commit_attack_charts: 'COMMIT_ATTACK_CHARTS',
      commitClearAllData: 'COMMIT_CLEAR_ALL_DATA'
    }),
    // 切换按钮
    changeCurrentAnalyze (val) {
      this.analyzeTab = val
      if (val === 'autoAnalysis') {
        this.getAttckStatistical()
        this.getAttackTableData({ 'type': 'sorter', 'val': { 'field': 'astart_time', 'order': 'descend' } })
      } else {
        this.getPerAttckStatistical()
        this.getPerAttackTableData({ 'type': 'sorter', 'val': { 'field': 'astart_time', 'order': 'descend' } })
      }
    },
    // 搜索点击事件
    onSearch () {
      this.getTableInfo({ 'type': 'pagCur', 'val': { 'cur': 1 } })
    },
    // 表格的筛选条件发生变化的时候所触发事件
    filterChange (vals, type) {
      for (let [key, value] of Object.entries(vals)) {
        this.getTableInfo({ 'type': 'filter', 'val': { 'key': key, 'value': value } })
      }
    },
    // 每页显示条数改变时所触发的事件
    paginationSizeChange (vals, type) {
      this.getTableInfo({ 'type': 'pagSize', 'val': { 'size': vals } })
    },
    // 每页页数改变时所触发的事件
    paginationCurrentChange (vals, type) {
      this.getTableInfo({ 'type': 'pagCur', 'val': { 'cur': vals } })
    },
    // 当表格的排序条件发生变化的时候会触发该事件
    tableSortChange (vals, type) {
      this.getTableInfo({ 'type': 'sorter', 'val': { 'field': `a${vals.prop}`, 'order': vals.order } })
    },
    // 数据过滤使用的方法 filterRow
    filterRow (row) {
      return true
    },
    RowClick (row) {
      this.$router.push({ name: '分析详情', query: {row: row.attack_event_id, type: this.analyzeTab} })
    },
    getTableInfo (val, type) {
      if (this.analyzeTab === 'autoAnalysis') {
        if (this.warnTypeTab === 'attack') {
          this.getAttackTableData(val)
        }
      } else if (this.analyzeTab === 'manDiscory') {
        if (this.perTypeTab === 'attack') {
          this.getPerAttackTableData(val)
        }
      }
    },
    // 规则设置
    ruleConfig () {
      this.$router.push({ path: 'analyze/autoAnalyzeRule', query: { 'type': '1' } })
    },
    goAnalyze (attackEventId) {
      let type = 1
      if (this.analyzeTab === 'manDiscory') {
        type = 2
      }
      this.$router.push({
        path: 'analyze/attackDepthAnalysis',
        query: {
          'type': type,
          'attackEventId': attackEventId
        }
      })
    },
    matchRules () {
      this.triggerAnalyze()
    }
  }
}
</script>
<style lang='less'>
.loadingClass{
  top: 109px !important;
  overflow: hidden;
}
.classify-popover{
  border:1px solid #1f92ef;
  border-radius: 2px;
  .popper__arrow{
    border:1px solid #1f92ef;
  }
}
#Analysis {
  // min-height: 800px;
  background-color: #ffffff;
  #autoAnalyze-control{
    width:100%;
    height: 50px;
    line-height:50px;
    border-bottom:1px solid #eeeeee;
    padding:0 20px;
    position: relative;
    #sel-change-analyze{
      .at-radio-button__inner{
        height: 30px;
        line-height: 18px;
        color:#5c6781;
        font-weight: 700;
        font-size: 14px;
      }
      .is-active{
        .at-radio-button__inner{
            color:#ffffff;
        }
      }
    }
    #btn-rule-config{
      float: right;
      position: absolute;
      right: 20px;
      top: 80px;
      z-index: 50;
    }
  }
  #warn-tabs {
    margin-top: 15px;
    .at-tabs__nav-scroll{
      overflow: visible;
      border-bottom: 1px solid #eeeeee;
      padding-left: 20px;
      padding-right: 20px;
      height: 35px;
      .at-tabs__nav{
        margin-right: 5px;
        .at-tabs__item {
          background-color: #ffffff;
          border-top:1px solid #ffffff;
          border-left:1px solid #ffffff;
          border-right:1px solid #ffffff;
          border-bottom:1px solid #eeeeee;
          min-width: 120px;
          height: 35px;
          line-height: 35px;
        }
        .is-active {
          border-top:1px solid #eeeeee;
          border-left:1px solid #eeeeee;
          border-right:1px solid #eeeeee;
          border-bottom:1px solid #ffffff;
          color:#1f92ef;
          font-weight: bolder;
        }
      }
    }
    & .at-tabs__content {
      padding: 20px;
      .analyze-statistical-container{
        display: grid;
        width:100%;
        grid-template-columns:2fr 1fr 1fr;
        grid-template-rows: 150px;
        grid-gap: 20px;
        .analyze-statistical-box{
          border: 1px solid #eeeeee;
          .statistics-content{
            width:100%;
            height: 90px;
            display: flex;
            .statistics-analyze-info{
              width:80%;
              display: flex;
              flex-direction: column;
              .statistics-total{
                width: 100%;
                height: 36px;
                line-height: 36px;
                margin: 20px 0 13px;
                font-size: 36px;
                font-weight: 700;
                padding: 0 20px;
                color: #1f92ef;
              }
              .statistics-info{
                width: 100%;
                height: 12px;
                line-height: 12px;
                margin-bottom: 15px;
                padding: 0 20px;
                .statistics-title{
                  display: inline-block;
                  color: #5c6781;
                  font-weight: 700;
                  margin-right: 40px;      
                }
                .statistics-text{
                  display: inline-block;
                  span{
                    display: inline-block;
                    height: 12px;
                    line-height: 12px;
                    color:#5c6781;
                  }
                  .mg-rt6{
                    margin-right: 6px;
                  }  
                }
              }
            }
            .statistics-chart-hint{
              width:20%;
              padding-top: 30px;
              .chart-hint-item{
                width: 100%;
                height: 12px;
                line-height: 12px;
                margin-bottom: 6px;
                .chart-hint-icon-total{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border: 1px solid #1f92ef;
                  background-color: #e8f4fd;
                  border-radius: 50%;
                }
                .chart-hint-icon-analyzed{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border: 1px solid #1f92ef;
                  background-color: #1f92ef;
                  border-radius: 50%;
                }
                .chart-hint-text{
                  display: inline-block;
                }
              }
            }
          }
          .chart-main{
            width:100%;
            height: 60px;
          }
          .statistics-pie-title{
            width: 100%;
            height: 12px;
            line-height: 12px;
            padding: 0 20px;
            margin:20px 0;
            font-size: 12px;
            font-weight: 700;
            color: #5c6781;
          }
          .anlyze-pie-chart{
            width: 100%;
            height: 93px;
          }
        }
      }
    }
  }
  .at-tabs {
    margin-top: 10px;
    .at-tab-pane {
      margin-top: 10px 0;
    }
    .analyze-type-content{
      height:50px;
      line-height: 50px;
      color: #5c6781;
      border: 1px solid #eeeeee;
      margin-top: 20px;
      padding:0 20px;
      font-weight: 700;
    }
    .tabHeader {
      height: 40px;
      margin: 0px 0;
      border-left: 1px solid #eeeeee;
      border-right: 1px solid #eeeeee;
      padding: 10px 20px 0;
      position: relative;
      .search-content{
        float: right;
      }
    }
    .at-table__body-wrapper {
      overflow: hidden;
    }
    .at-pagination {
      text-align: center;
      padding: 20px 0;
      border-left:1px solid #eeeeee;
      border-right:1px solid #eeeeee;
      border-bottom:1px solid #eeeeee;
    }
  }
}
</style>
<style scoped>
@import '../eventManagement/style/tag.css';
</style>
